<div nz-row>
  <div nz-col nzSpan="18" class="page-container">
    <div class="page-header">
      文章管理
      <span class="caption">Article Management</span>
    </div>

    <div class="toolbar">
      <div class="left">
        <nz-space nzSize="middle">
          <input
            *nzSpaceItem
            nz-input
            placeholder="输入任意字符搜索文章..."
            type="text"
          />
          <button *nzSpaceItem nz-button nzShape="circle">
            <i nz-icon nzType="search"></i>
          </button>
          <nz-radio-group
            *nzSpaceItem
            nzButtonStyle="solid"
            class="radio-group"
            [(ngModel)]="query.status"
          >
            <label nz-radio-button nzValue="1"
              ><i nz-icon nzType="check-circle" nzTheme="outline"></i
            ></label>
            <label nz-radio-button nzValue="0"
              ><i nz-icon nzType="ellipsis" nzTheme="outline"></i
            ></label>
            <label nz-radio-button nzValue="2"
              ><i nz-icon nzType="close-circle" nzTheme="outline"></i
            ></label>
          </nz-radio-group>
        </nz-space>
      </div>

      <div class="right">
        <sort-btn></sort-btn>
      </div>
    </div>

    <div class="body">
      <article-card
        class="article-item"
        *ngFor="let item of articles"
        [title]="item.title"
        [author]="item.author.name"
        [create_at]="item.create_at"
        (click)="showDetailDrawer(item)"
      ></article-card>
    </div>
  </div>
  <div nz-col nzSpan="6" class="page-container right-container">
    <div class="page-header">
      历史记录
      <span class="caption">History</span>
    </div>
    <div class="body">
      <history-item class="history-item"></history-item>
    </div>
  </div>
</div>

<nz-drawer
  nzWidth="24%"
  [nzClosable]="false"
  [nzVisible]="drawerVisible"
  nzPlacement="right"
  (nzOnClose)="closeDetailDrawer()"
>
  <ng-container *nzDrawerContent>
    <div class="article-detail">
      <div class="page-header header">
        文章详情
        <span class="caption">Detail</span>
        <div class="extra" (click)="toDetail()">
          <i nz-icon nzType="fullscreen" nzTheme="outline"></i>
        </div>
      </div>
      <article class="body">
        <h3>{{ currArticle.title }}</h3>
        <span class="caption">
          By
          {{ currArticle.author.name }}
          At
          {{ currArticle.create_at | date: "HH:mm" }}
        </span>
        <p>{{ currArticle.content }}</p>
      </article>
      <div class="footer">
        <nz-space>
          <button *nzSpaceItem nz-button nzType="primary">通过</button>
          <button *nzSpaceItem nz-button nzType="default">不通过</button>
        </nz-space>
      </div>
    </div>
  </ng-container>
</nz-drawer>
